<template>
  <div class="reset-password-container">
    <el-form label-position="top" class="reset-form">
      <h2>密码修改服务v1.0.0</h2>
      <br>
        <div style="color:grey;font-size: 15px;">向您绑定的邮箱地址{{email}}发送验证码以验证您的真实身份</div>
      <br>
        <el-form-item label="验证码">
        <el-input v-model="resetForm.code" placeholder="请输入验证码" autocomplete="off" @blur="JYYZM" :disabled="isDisabled2">
          <template #append>
            <el-button @click="ClickEmail">{{YZMMessage}}</el-button>
          </template>
        </el-input>
        <div style="color:red;font-size:15px">{{MyMessage}}</div>
      </el-form-item>
      <el-form-item label="新密码">
        <el-input type="password" v-model="resetForm.password" placeholder="请输入新密码" @blur="JYpassword"/>
        <div v-if="PWDLevel" style="color: red;font-size: 10px;">
          密码需为12位，至少包含大小写字母+特殊字符+数字
        </div>
      </el-form-item>
      
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="resetForm.confirmPassword" placeholder="请再次输入新密码" autocomplete="new-password" @blur="JYRpwd"></el-input>
        <div v-if="PWDse" style="color: red;font-size: 10px;">
          两次密码不一致！
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submit" :disabled="isDisabled" >重置密码</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watchEffect, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { ServiceGetEmail } from '@/api/user/GetEmail';
import { ServiceCPSendEmial } from '@/api/user/CPSendEmail';
import { ServiceCPJYEmail } from '@/api/user/CPJYEmail';
import { ServiceCP } from '@/api/user/ChangePassword';
import router from '@/router/router';

let resetForm = ref({
  email: '',
  code: '',
  password: '',
  confirmPassword: ''
});

let MyMessage = ref(" ")

let isDisabled2 = ref(true)

let isDisabled = ref(false)

let PWDLevel = ref(false)

let PWDse = ref(false)

let email = ref("null")

let contenttime = ref(0)

let YZMMessage = ref("获取验证码")

let timer:number = 0;

let JY = ref(true);

async function ClickEmail(){
  if(contenttime.value === 0){
    isDisabled2.value = false
    await ServiceCPSendEmial()
    .then(res=>{
      ElMessage({
        message: res.data.data,
        type: 'success',
      })
    })
    .catch(err=>{
      ElMessage({
        message: err.message,
        type: 'warning',
      })
    })
    //启动倒计时
    contenttime.value = 60;
    timer = setInterval(()=>{
      if(contenttime.value>0){
        contenttime.value--;
        YZMMessage.value = contenttime.value+"秒后重试";
      }
      else {
        clearInterval(timer)
        isDisabled2.value = true;
        YZMMessage.value = "获取验证码";
      }
    },1000)
  }
}

async function JYYZM(){
  if(!isDisabled2.value){
    await ServiceCPJYEmail(resetForm.value.code)
      .then(res=>{
        MyMessage.value = res.data.data;
        if(res.data.data == "身份验证成功！"){
          JY.value = false;
        }
        else {
          JY.value = true;
        }
      })
      .catch(err=>{
        ElMessage({
            message: err.message,
            type: 'warning',
          })
      })
  }
  
}

onMounted(()=>{
  GetEmail();
})

//获取邮箱地址
async function GetEmail(){
  await ServiceGetEmail()
  .then(res=>{
    email.value = res.data.data
  })
  .catch(err=>{
    ElMessage({
    message: "无法获取邮箱"+err.message,
    type: 'warning',
  })
  })
}





//校验
function JYpassword(){
  const ruler = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{12}$/
  if(!ruler.test(resetForm.value.password)){
    PWDLevel.value = true;
  }else {
    PWDLevel.value = false;
  }
}

function JYRpwd(){
  if(resetForm.value.password != resetForm.value.confirmPassword){
    PWDse.value = true
  }
  else {
    PWDse.value = false
  }
}

// watchEffect(()=>{
//   if(!PWDLevel.value || !PWDse.value){
//     isDisabled.value = true
//   }
// })

async function submit(){
  if(!PWDLevel.value && !PWDse.value && !JY.value){
    await ServiceCP(resetForm.value.password)
      .then(res=>{
        if(res.data.code = 1){
          ElMessage({
            message: res.data.data,
            type: 'success',
          })
          router.push('/')
        }
        else {
          ElMessage({
            message: res.data.data,
            type: 'warning',
          })
        }
      })
      .catch(err=>{
        ElMessage({
            message: err.message,
            type: 'warning',
          })
      })
  }
  else{
    alert("请完成所有表单提示后提交！")
  }

}
</script>

<style scoped>
.reset-password-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
  min-width: 100%;
}

.reset-form {
  width: 100%;
  max-width: 800px;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  animation: fadeIn 1s;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.el-form-item {
  margin-bottom: 20px;
}

.el-button {
  width: 100%;
}

@media (max-width: 768px) {
  .reset-form {
    width: 90%;
  }
}
</style>